<template>
  <div class="articles-container">
    <!-- 过滤文章模块 -->
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <!-- 卡片头部 -->
      <div slot="header">
        <span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
      </div>
      <el-form size="small" ref="form" :model="form" label-width="50px">
        <!-- 文章的状态 -->
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="item in articleStatus"
              :key="item.id"
              :label="item.id"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.channel" placeholder="请选择文章所属频道">
            <el-option
              v-for="item in channels"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="datetimerange"
            align="right"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00', '08:00:00']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 过滤结果 -->
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <!-- 卡片头部 -->
      <div slot="header">
        <span>一共{{ total }}篇文章,在{{ page }}页</span>
      </div>
      <!-- 表格 -->
      <el-table :data="articles" style="width: 100%">
        <!-- 通过prop绑定当前列的显示字段 -->
        <el-table-column prop="cover" label="封面" width="180">
          <!-- 通过slot-scope获取table当前行的数据item   -->
          <template slot-scope="tb">
            <el-image
              :src="tb.row.cover.images[0]"
              style="width: 150px; height: 100px"
              lazy
            >
              <!-- 加载中 -->
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
              <!-- 图片加载失败 -->
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag :type="formatStatus(scope.row.status).type">{{
              formatStatus(scope.row.status).text
            }}</el-tag>
            <!-- <el-tag v-else-if="scope.row.status === 1" type="info"
              >待审核</el-tag
            >
            <el-tag v-else-if="scope.row.status === 2" type="success"
              >审核通过</el-tag
            >
            <el-tag v-else-if="scope.row.status === 3" type="warning"
              >审核失败</el-tag
            >
            <el-tag v-else-if="scope.row.status === 4" type="danger"
              >已删除</el-tag
            > -->
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
        <!-- 操作区域 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editArticle(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="delArticle(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next,total"
        @current-change="pageChange"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles, getChannel, delArticle } from '../../api/news'
// 文章状态
const articleStatus = [
  {
    id: null,
    label: '全部'
  },
  {
    id: 0,
    label: '草稿'
  },
  {
    id: 1,
    label: '待审核'
  },
  {
    id: 2,
    label: '审核通过'
  },
  {
    id: 3,
    label: '审核失败'
  },
  {
    id: 4,
    label: '已删除'
  }
]
export default {
  data () {
    return {
      // 文章状态数据
      articleStatus,
      // 文章频道数据
      channels: [],
      // 过滤器数据
      form: {
        // 文章状态
        status: null,
        // 文章所属频道
        channel: null,
        // 日期范围
        date: ''
      },
      // 文章列表数据
      articles: [],
      // 分页数据
      // 每页显示几条
      per_page: 10,
      // 当前页码
      page: 1,
      // 总共多少条数据
      total: 0
    }
  },
  created () {
    this.getArticles()
    this.getChannel()
  },
  methods: {
    // 根据选择的条件查询文章列表
    search () {
      this.getArticles()
    },
    // 获取文章列表
    async getArticles () {
      const { status, channel, date } = this.form
      // 处理文章列表过滤数据
      const params = {
        // 当前页码
        page: this.page,
        // 文章状态
        status,
        // 文章所属频道
        channel_id: channel,
        // 开始时间
        begin_pubdate: date ? [0] : null,
        // 结束时间
        end_pubdate: date ? [1] : null
      }
      // eslint-disable-next-line camelcase
      const { data: { data: { results, total_count } } } = await getArticles(params)
      // eslint-disable-next-line camelcase
      this.total = total_count
      this.articles = results
    },
    // 获取文章频道数据
    async getChannel () {
      const { data: { data: { channels } } } = await getChannel()
      this.channels = channels
    },
    // 切换分页事件
    pageChange (e) {
      this.page = e
      // 更新页码后重新调用列表数据
      this.getArticles()
    },
    // 格式化文章状态
    formatStatus (status) {
      const statusArr = [
        { text: '草稿', type: 'info' },
        { text: '待审核', type: 'info' },
        { text: '审核通过', type: 'success' },
        { text: '审核失败', type: 'warning' },
        { text: '已删除', type: 'danger' }
      ]
      return statusArr[status]
    },
    // 编辑文章
    editArticle (i, row) {
      console.log('编辑文章')
    },
    // 删除文章
    delArticle (i, row) {
      this.$confirm(`确定删除=>${row.title}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delArticle(row.id.toString())
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        } catch (error) {
          console.warn(error)
          this.$message({
            message: '删除失败!',
            type: 'error'
          })
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.articles-container {
  .el-card {
    margin-bottom: 20px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}
</style>
